<div id="top-left">
  <span class="location-title">直播间</span>
  <nz-breadcrumb [nzSeparator]="iconTemplate">
    <nz-breadcrumb-item>
      <a [routerLink]="['/main/live']">首页</a>
    </nz-breadcrumb-item>
    <nz-breadcrumb-item>
      {{data['title']}}
    </nz-breadcrumb-item>
  </nz-breadcrumb>
  <ng-template #iconTemplate><i nz-icon nzType="caret-right" nzTheme="outline"></i></ng-template>
</div>
<div class="main-content">
  <div class="live-btns">
    <button (click)="editShow(true)" nz-button nzType="primary">直播间属性</button>
    <button (click)="historyShow(true)" nz-button nzType="primary">直播间历史</button>
    <button (click)="shareShow(true)" nz-button nzType="primary">分享地址</button>
    <button (click)="templateShow(true)" nz-button nzType="primary">页面模板</button>
    <button (click)="contentShow(true)" nz-button nzType="primary">嵌入内容</button>
    <button (click)="changeAllowLiveStream(0)" *ngIf="data['allowLiveStream']==1" [nzDanger]="true" nz-button
      nzType="primary">关闭推流</button>
    <button (click)="changeAllowLiveStream(1)" *ngIf="data['allowLiveStream']==0" nz-button
      nzType="primary">开启推流</button>
    <button (click)="delete()" nz-button [nzDanger]="true" nzType="primary">删除直播间</button>
  </div>
  <div class="live-info">
    <div class="info-left">
      <div class="info-title">直播现场 :</div>
      <div class="info-player">
        <app-player #player *ngIf="data['roomId']" [roomId]="data['roomId']"></app-player>
      </div>
      <div class="input-copy">
        <span>推流地址 :</span>
        <input #pushUrl nz-input readonly="readonly" [ngModel]="data['pushUrl']" />
        <button nz-button (click)="copy('pushUrl')" nzType="primary">复制</button>
      </div>
      <div class="input-copy">
        <span>推流秘钥 :</span>
        <input #pushKey nz-input readonly="readonly" [ngModel]="data['pushKey']" />
        <button nz-button (click)="copy('pushKey')" nzType="primary">复制</button>
      </div>
      <div style="color: #333; margin-top: 20px;">
        请将推流地址复制到发布软件或发布设备中进行推流发布。
      </div>
      <div class="input-copy" style="display: flex;align-items: start;">
        <span style="width: 67px;">拉流地址 :</span>
        <div class="url-list">
          <div class="url">
            <span>RTMP：</span>
            <input #playKey1 nz-input readonly="readonly" value="rtmp://live.ysjlive.com/vr/{{data['roomId']}}" />
            <button nz-button (click)="copy('playKey1')" nzType="primary">复制</button>
          </div>
          <div class="url">
            <span>FLV：</span>
            <input #playKey2 nz-input readonly="readonly" value="https://live.ysjlive.com/vr/{{data['roomId']}}.flv" />
            <button nz-button (click)="copy('playKey2')" nzType="primary">复制</button>
          </div>
          <div class="url">
            <span>M3U8：</span>
            <input #playKey3 nz-input readonly="readonly" value="https://live.ysjlive.com/vr/{{data['roomId']}}.m3u8" />
            <button nz-button (click)="copy('playKey3')" nzType="primary">复制</button>
          </div>

        </div>

      </div>
    </div>
    <div class="info-right">
      <ul nz-menu nzMode="horizontal" class="message-menu">
        <li nz-menu-item [nzSelected]="messagePanelIndex === 0">
          <a (click)="messagePanelClick(0)">弹幕</a>
        </li>
        <li nz-menu-item [nzSelected]="messagePanelIndex === 1">
          <a (click)="messagePanelClick(1)">在线用户列表</a>
        </li>
        <li nz-menu-item [nzSelected]="messagePanelIndex === 2">
          <a (click)="messagePanelClick(2)">离线用户</a>
        </li>
        <li nz-menu-item [nzSelected]="messagePanelIndex === 3">
          <a (click)="messagePanelClick(3)">禁言列表</a>
        </li>
      </ul>
      <div class="message-box">
        <div *ngIf="messagePanelIndex === 0" class="meesage-list">
          <div class="list-title list-chat">
            <div class="center">序号</div>
            <div class="center">用户</div>
            <div class="center">内容</div>
            <div class="center">时间</div>
          </div>
          <div class="list-content list-chat" [style.color]="item['status'] === -1 ? 'red': '#333'"
            *ngFor="let item of messageList; let no = index;" (mouseover)="setMouseOver(no, true)"
            (mouseleave)="setMouseOver(no, false)">
            <div class="center">
              {{(messageSelectData.pageindex - 1) * messageSelectData.pagesize + no + 1}}</div>
            <div>{{item['ip']}}</div>
            <div>{{item['content']}}</div>
            <div class="center">{{item['date'] | date:'yyyy.MM.dd HH:mm'}}</div>
            <div class="message-forbid" *ngIf="item['isOver'] && !item['isRefuse']"
              (mouseleave)="setMouseOver(no, false)">
              <a (click)="setMessage(item['id'], 1)"><img src="/assets/images/forbid-speech.png" /></a>
            </div>
          </div>
          <div style="height: 30px;"></div>
        </div>
        <div *ngIf="messagePanelIndex === 0" class="message-send">
          <input nz-input placeholder="在此输入弹幕" [(ngModel)]="inputMessage" />
          <button (click)="sendMessage()" nz-button nzType="primary">发送</button>
        </div>
        <div *ngIf="messagePanelIndex === 1" class="meesage-list">
          <div class="list-title list-user">
            <div class="center">序号</div>
            <div class="center">用户</div>
            <div class="center">画质</div>
            <div class="center">连接时间</div>
            <div class="center"></div>
          </div>
          <div class="list-content list-user" *ngFor="let item of watchList; let no = index;">
            <div class="center">{{(messageSelectData.pageindex - 1) * messageSelectData.pagesize + no + 1}}</div>
            <div class="center">{{item['ip']}}</div>
            <div class="center">{{item['quality']}}</div>
            <div class="center">{{item['startDate'] | date:'yyyy-MM-dd HH:mm'}}</div>
            <div class="center"><img src="/assets/images/forbid-speech.png" /></div>
          </div>
        </div>
        <div *ngIf="messagePanelIndex === 2" class="meesage-list">
          <div class="list-title list-user-leave">
            <div class="center">序号</div>
            <div class="center">用户</div>
            <div class="center">画质</div>
            <div class="center">连接时间</div>
            <div class="center">观看时长</div>
          </div>
          <div class="list-content list-user-leave" *ngFor="let item of leaveWatchList; let no = index;">
            <div class="center">{{(messageSelectData.pageindex - 1) * messageSelectData.pagesize + no + 1}}</div>
            <div class="center">{{item['ip']}}</div>
            <div class="center">{{item['quality']}}</div>
            <div class="center">{{item['startDate'] | date:'yyyy-MM-dd HH:mm'}}</div>
            <div class="center">{{item['minute']}}</div>
          </div>
        </div>
        <div *ngIf="messagePanelIndex === 3" class="meesage-list">
          <div class="forbid-speech">
            <div *ngFor="let item of forbidMessageList">
              <span>{{item['ip']}}</span>
              <a (click)="setMessage(item['id'], 0)"><img src="/assets/images/unlock.png" /></a>
            </div>
          </div>
        </div>
      </div>
      <div class="consumption-detail" style="margin: 10px;" *ngIf="calcData">
        <span>当前推流时长：<label>{{calcData.timeLength}}</label></span>
        <br />
        <span>我的剩余时长：<label>￥{{calcData.user.formatTimeBalance}}</label></span>
        <span>预计剩余时长：<label>￥{{calcData.user.formatDeductionTimeBalance}}</label></span>
      </div>
      <div class="consumption-detail" style="margin: 10px;" *ngIf="settleData">
        <span>结算推流时长：<label>{{settleData.timeLength}}</label></span>
        <br />
        <span>我的剩余时长：<label>￥{{settleData.user.formatDeductionTimeBalance}}</label></span>
      </div>
      <!-- <div class="consumption-detail" style="margin: 10px;" *ngIf="calcData">
        <span>推流时长：<label>{{(calcData.flow.pushKb > 1048576 ? (calcData.flow.pushKb / 1048576) : (calcData.flow.pushKb / 1024)) | number: '1.1-2'}}{{calcData.flow.pushKb > 1048576 ? 'GB': 'MB'}}</label></span>
        <span>播放总流量：<label>{{(calcData.flow.pullKb > 1048576 ? (calcData.flow.pullKb / 1048576) : (calcData.flow.pullKb / 1024)) | number: '1.1-2'}}{{calcData.flow.pullKb > 1048576 ? 'GB': 'MB'}}</label></span>
        <br />
        <span>预计费用：<label>￥{{ (0- calcData.account.amount) | number: '1.1-2' }}</label></span>
        <span>我的余额：<label>￥{{(calcData.user.balance - calcData.account.amount) | number: '1.1-2'}}</label></span>
        <span>预计剩余余额：<label>￥{{calcData.user.balance | number: '1.1-2'}}</label></span>
      </div>
      <div class="consumption-detail" style="margin: 10px;" *ngIf="settleData">
        <span>推流消耗流量：<label>{{(settleData.flow.pushKb > 1048576 ? (settleData.flow.pushKb / 1048576) : (settleData.flow.pushKb / 1024)) | number: '1.1-2'}}{{settleData.flow.pushKb > 1048576 ? 'GB': 'MB'}}</label></span>
        <span>播放总流量：<label>{{(settleData.flow.pullKb > 1048576 ? (settleData.flow.pullKb / 1048576) : (settleData.flow.pullKb / 1024)) | number: '1.1-2'}}{{settleData.flow.pullKb > 1048576 ? 'GB': 'MB'}}</label></span>
        <br />
        <span>结算费用：<label>￥{{ (0- settleData.account.amount) | number: '1.1-2' }}</label></span>
        <span>我的余额：<label>￥{{settleData.user.balance | number: '1.1-2'}}</label></span>
      </div> -->
    </div>
  </div>
</div>

<nz-modal nzWrapClassName="vertical-center-modal" [(nzVisible)]="isEditShow" (nzOnCancel)="editShow(false)"
  [nzMaskClosable]="false" nzWidth="800" nzTitle="直播间属性" [nzFooter]="null">
  <form style="max-width: 760px;" nz-form [formGroup]="validateModifyForm" class="login-form" (ngSubmit)="modifyForm()">
    <nz-form-item>
      <nz-form-label [nzSm]="4" [nzXs]="24" nzRequired nzFor="title">直播间标题</nz-form-label>
      <nz-form-control [nzSm]="16" [nzXs]="24" nzErrorTip="请输入直播标题!">
        <input type="text" nz-input formControlName="title" placeholder="直播标题" />
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSm]="4" [nzXs]="24" nzRequired nzFor="liveDate">直播时间</nz-form-label>
      <nz-form-control [nzSm]="16" [nzXs]="24" nzErrorTip="请选择直播时间!">
        <nz-range-picker [nzShowTime]="true" formControlName="liveDate">
        </nz-range-picker>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSm]="4" [nzXs]="24" nzRequired nzFor="introduce">直播间描述</nz-form-label>
      <nz-form-control [nzSm]="16" [nzXs]="24" nzErrorTip="请输入直播描述!">
        <textarea rows="4" nz-input formControlName="introduce"></textarea>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSm]="4" [nzXs]="24" nzRequired nzFor="images">直播间LOGO</nz-form-label>
      <nz-form-control [nzSm]="16" [nzXs]="24">
        <nz-upload class="avatar-uploader" [nzAction]="uploadUrl" [nzHeaders]="headers" nzName="cover"
          nzListType="picture-card" [nzShowUploadList]="false" [nzBeforeUpload]="beforeUpload"
          (nzChange)="handleChange($event)">
          <ng-container *ngIf="!data['logo']">
            <i class="upload-icon" nz-icon [nzType]="isLoading ? 'loading' : 'plus'"></i>
            <div class="ant-upload-text">Upload</div>
          </ng-container>
          <img *ngIf="data['logo']" [src]="ossUrl + data['logo']" style="width: 100%; border-radius: 10px;" />
        </nz-upload>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-control [nzSpan]="16" [nzOffset]="4">
        <button nz-button [nzType]="'primary'">提交</button>
      </nz-form-control>
    </nz-form-item>
  </form>
</nz-modal>

<nz-modal nzWrapClassName="vertical-center-modal" [(nzVisible)]="isShareShow" (nzOnCancel)="shareShow(false)"
  [nzMaskClosable]="false" nzWidth="800" [nzFooter]="null">
  <nz-tabset>
    <nz-tab nzTitle="分享地址">
      <div class="live-address">
        <div nz-row [nzGutter]="16">
          <div nz-col nzSpan="3">观看地址 :</div>
          <div nz-col nzSpan="18"><input #watchUrl2 nz-input readonly="readonly" [ngModel]="watchUrlString" /></div>
          <div nz-col nzSpan="3"><button nz-button (click)="copy('watchUrl2')" nzType="primary">复制</button></div>
        </div>
        <div class="row-tips" nz-row [nzGutter]="16">
          <div nz-col nzSpan="3"></div>
          <div nz-col nzSpan="18">
            <span style="color: #6c00d8;">[云视界]</span>分享请复制该地址并发送给好友，推荐使用 Chrome 浏览器打开。
          </div>
        </div>
        <div nz-row [nzGutter]="16">
          <div nz-col nzSpan="3">嵌入代码 :</div>
          <div nz-col nzSpan="18">
            <textarea #watchIframe rows="4" nz-input readonly="readonly" [ngModel]="watchIframeString"></textarea>
          </div>
          <div nz-col nzSpan="3"><button nz-button (click)="copy('watchIframe')" nzType="primary">复制</button></div>
        </div>
        <div class="row-tips" nz-row [nzGutter]="16">
          <div nz-col nzSpan="3"></div>
          <div nz-col nzSpan="18"><span style="color: #6c00d8;">[云视界]</span>将上述代码粘贴到HTML网页，即可嵌入精彩直播画面，适用于PC端和H5端。
          </div>
        </div>
        <div nz-row [nzGutter]="16">
          <div nz-col nzSpan="3">二维码 :</div>
          <div nz-col nzSpan="18"><img style="width: 160px;" [src]="qrImageUrl" /></div>
        </div>
        <div style="height: 30px;"></div>
      </div>
    </nz-tab>
    <nz-tab nzTitle="分享设置">
      <form style="max-width: 760px;" [formGroup]="wxModifyForm" nz-form class="login-form"
        (ngSubmit)="modifyWxShare()">
        <nz-form-item>
          <nz-form-label [nzSm]="4" [nzXs]="24" nzRequired>微信分享标题</nz-form-label>
          <nz-form-control [nzSm]="16" [nzXs]="24">
            <input type="text" nz-input formControlName="wxShareTitle" placeholder="微信分享标题" />
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-label [nzSm]="4" [nzXs]="24" nzRequired>微信分享描述</nz-form-label>
          <nz-form-control [nzSm]="16" [nzXs]="24">
            <textarea rows="4" nz-input formControlName="wxShareDesc" placeholder="微信分享描述"></textarea>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-label [nzSm]="4" [nzXs]="24" nzRequired>微信分享LOGO</nz-form-label>
          <nz-form-control [nzSm]="16" [nzXs]="24">
            <nz-upload class="avatar-uploader" [nzAction]="uploadUrl" [nzHeaders]="headers" nzName="cover"
              nzListType="picture-card" [nzShowUploadList]="false" [nzBeforeUpload]="beforeUpload"
              (nzChange)="handlewxCoverChange($event)">
              <ng-container *ngIf="!data['wxShareCover']">
                <i class="upload-icon" nz-icon [nzType]="isLoading ? 'loading' : 'plus'"></i>
                <div class="ant-upload-text">Upload</div>
              </ng-container>
              <img *ngIf="data['wxShareCover']" [src]="ossUrl + data['wxShareCover']"
                style="width: 100%; border-radius: 10px;" />
            </nz-upload>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-control [nzSpan]="16" [nzOffset]="4">
            <button nz-button [nzType]="'primary'">提交</button>
          </nz-form-control>
        </nz-form-item>
      </form>
    </nz-tab>
  </nz-tabset>
</nz-modal>

<nz-modal nzWrapClassName="vertical-center-modal" [(nzVisible)]="isHistoryShow" (nzOnCancel)="historyShow(false)"
  [nzMaskClosable]="false" nzWidth="800" nzTitle="直播间历史" [nzFooter]="null">
  <div class="live-info-time">
    直播总时长：<span>{{videoPushTime}}</span>
  </div>
  <div class="meesage-list"
    style="margin: 15px 0px; height: 350px; padding-bottom: 10px; border-radius: 10px; color: #333; background-color: #eee;">
    <div class="list-title" style="border-top-left-radius: 10px; border-top-right-radius: 10px;" nz-row>
      <div class="center" nz-col [nzSpan]="6">开始时间</div>
      <div class="center" nz-col [nzSpan]="6">结束时间</div>
      <div class="center" nz-col [nzSpan]="6">推流时长</div>
      <div class="center" nz-col [nzSpan]="6">永久存储</div>
    </div>
    <div class="list-content" nz-row *ngFor="let vo of videoList; let no = index;">
      <div class="center" nz-col [nzSpan]="6">{{vo['StartTime'] | date:'yyyy-MM-dd HH:mm:ss'}}</div>
      <div class="center" nz-col [nzSpan]="6">{{vo['EndTime'] | date:'yyyy-MM-dd HH:mm:ss'}}</div>
      <div class="center" nz-col [nzSpan]="6">{{vo['minute']}}</div>
      <div class="center" nz-col [nzSpan]="6">
        <a style="color: #22265b; font-weight: bold;" *ngIf="!vo['isSave'] && !vo['isSaving']" (click)="goSave(no)"><i
            nz-icon nzType="save" nzTheme="outline" style="margin-right: 5px;"></i>保存</a>
        <div *ngIf="vo['isSaving']">
          <nz-select style="width: 100px;" [(ngModel)]="vo['categoryId']" nzPlaceHolder="--请选择--">
            <nz-option *ngFor="let cate of categoryList" [nzValue]="cate['id']" [nzLabel]="cate['name']"></nz-option>
          </nz-select>
          <a style="color: #22265b; font-weight: bold; margin-left: 5px;" (click)="saveVod(no)">确定</a>
          <a style="color: #22265b; font-weight: bold; margin-left: 5px;" (click)="cancelSave(no)">取消</a>
        </div>
      </div>
    </div>
  </div>
  <div>
    <span style="color:#333">永久存储：直播结束后内容保存<strong>7</strong>天，过期内容将被自动清除。点击[保存]可永久存储至
      <a style="color: #b67fec;" [routerLink]="['/main/vod/category']">[点播视频库]</a>中。</span>
  </div>
  <div>
    <span style="color:#333">默认回放：当直播间空闲无直播状态下选取一段回放内容进行循环播放。</span>
  </div>
</nz-modal>

<nz-modal nzWrapClassName="vertical-center-modal" [nzBodyStyle]="{'padding': '0px'}" [(nzVisible)]="isTemplateShow"
  (nzOnCancel)="templateShow(false)" [nzMaskClosable]="false" nzWidth="784" nzTitle="绑定页面模板" [nzFooter]="null">
  <div class="template-list">
    <div class="template-item">
      <div class="item-bind" *ngIf="data['pageModelId'] === 0">
        <div></div>
        <div>默认模板</div>
        <div>已绑定</div>
      </div>
      <div class="item-wait-bind" *ngIf="data['pageModelId'] !== 0">
        <div>
          <div>默认模板</div>
          <div></div>
        </div>
        <div><button (click)="bindTemplate(0)" nz-button nzType="primary">绑定</button></div>
      </div>
    </div>
    <div class="template-item" *ngFor="let item of pageModelList;">
      <div class="item-bind" *ngIf="data['pageModelId'] === item['id']">
        <div>{{item['modelName']}}</div>
        <div>{{item['type'] === 1 ? '单页直播间模板': '多页直播间模板'}}</div>
        <div>已绑定</div>
      </div>
      <div class="item-wait-bind" *ngIf="data['pageModelId'] !== item['id']">
        <div>
          <div>{{item['modelName']}}</div>
          <div>{{item['type'] === 1 ? '单页直播间模板': '多页直播间模板'}}</div>
        </div>
        <div><button (click)="bindTemplate(item['id'])" nz-button nzType="primary">绑定</button></div>
      </div>
    </div>
  </div>
</nz-modal>

<nz-modal nzWrapClassName="vertical-center-modal" [(nzVisible)]="isContentShow" (nzOnCancel)="contentShow(false)"
  [nzMaskClosable]="false" nzWidth="800" nzTitle="嵌入内容" [nzFooter]="null" (nzAfterOpen)="conentAfterOpen()">
  <ul nz-menu nzMode="horizontal" class="content-menu">
    <li nz-menu-item [nzSelected]="position === 'lt'">
      <a (click)="setContentPosition('lt')">左上</a>
    </li>
    <li nz-menu-item [nzSelected]="position === 'lb'">
      <a (click)="setContentPosition('lb')">左下</a>
    </li>
    <li nz-menu-item [nzSelected]="position === 'rt'">
      <a (click)="setContentPosition('rt')">右上</a>
    </li>
    <li nz-menu-item [nzSelected]="position === 'rb'">
      <a (click)="setContentPosition('rb')">右下</a>
    </li>
  </ul>
  <div class="content-mod">
    <a nz-dropdown [nzDropdownMenu]="content_menu">
      {{contentMod}}
      <i nz-icon nzType="caret-down" nzTheme="outline"></i>
    </a>
    <nz-dropdown-menu #content_menu="nzDropdownMenu">
      <ul nz-menu nzSelectable>
        <li (click)="setContentMod('自编内容')" nz-menu-item [nzSelected]="contentMod === '自编内容'">自编内容</li>
        <li (click)="setContentMod('观看人数')" nz-menu-item [nzSelected]="contentMod === '观看人数'">观看人数</li>
      </ul>
    </nz-dropdown-menu>
  </div>
  <div class="content-edit">
    <div class="live-content" *ngIf="contentMod === '自编内容'">
      <ckeditor *ngIf="editLoading" [editor]="Editor" [config]="config" [(ngModel)]="content" (ready)="onReady($event)"
        (change)="onChange()">
      </ckeditor>
      <div style="margin-top: 10px;"><button style="width: 100px;" (click)="saveConent()" nz-button
          nzType="primary">保存</button></div>
    </div>
    <div *ngIf="contentMod === '观看人数'" class="watch-input">
      <div>观看人数倍率 :</div>
      <input nz-input [disabled]="true" placeholder="请输入观看人数倍率" nzSize="large" [(ngModel)]="watchMultiple"
        (ngModelChange)="setWatchMultiple()" />
    </div>
  </div>
</nz-modal>
